<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>历史数据</h2>
                <ol class="breadcrumb">
                    <li>
                        消防用水管理系统
                    </li>
                    <li class="active">
                        历史数据
                    </li>
                </ol>
            </div>
        </div>

        <div class="wrapper wrapper-content">
           <div class="row">
               <div class="col-lg-12">
                   <div class="tabs-container">
                       <ul class="nav nav-tabs">
                           <li class="active"><a data-toggle="tab" href="#tab-1"><i class="fa fa-area-chart"></i></a></li>
                           <li class=""><a data-toggle="tab" href="#tab-2"><i class="fa fa-table"></i></a></li>
                       </ul>
                       <div class="tab-content">
                           <div id="tab-1" class="tab-pane active">
                               <div class="panel-body">
                                   <div class="row">
                                       <div class="col-lg-12">
                                           <div id="main_chart" style="width: 100%;height: 400px;" ></div>
                                       </div>
                                   </div>
                                   <div class="row">
                                       <div class="col-lg-12" style="padding:  0 0 0 0;margin-top: 10px;">
                                           <div class="col-lg-3">
                                               <div class="col-xs-12">
                                                   <form id="channelSelectForm" class="form-horizontal">
                                                       <div class="form-group"><label class="col-lg-3 control-label">主机选择</label>
                                                           <div class="col-lg-9"><select id="deviceSelect"  class=" form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                                       </div>
                                                       <div class="form-group"><label class="col-lg-3 control-label">通道选择</label>
                                                           <div class="col-lg-9"><select id="channelSelect"  class=" form-control " tabindex="-1" aria-hidden="true" style="width: 100%"></select></div>
                                                       </div>
                                                       <div class="col-lg-12" style="padding: 0 0 0 0">
                                                           <div class="col-lg-6 pull-right" style="padding: 0 0 0 0">
                                                               <button id="checkLineBtn" type="button" class="btn btn-block btn-info"><i class="fa fa-check"></i>&nbsp;查询</button>
                                                           </div>
                                                       </div>
                                                   </form>
                                               </div>
                                           </div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                           <div id="tab-2" class="tab-pane">
                               <div class="panel-body">
                                   <table class="table table-striped table-bordered table-hover " id="historyTable" cellspacing="0" width="100%">
                                       <thead>
                                       <tr>
                                           <th>ID</th>
                                           <th>时间</th>
                                           <th>IP</th>
                                           <th>通道1</th>
                                           <th>通道2</th>
                                           <th>通道3</th>
                                           <th>通道4</th>
                                       </tr>
                                       </thead>
                                       <tbody>

                                       </tbody>
                                   </table>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
        </div>

    <#include "./bottom_nav.ftl">
    </div>

</div>


<#include "./js.ftl">

<script>
    var historyTable = undefined,option = undefined;
    var chartData = [], chartDate = [];
    var myChart = echarts.init(document.getElementById("main_chart"));

    $("#checkLineBtn").click(function(){
        var device_name = $("#deviceSelect").find("option:selected").text();
        var channel_number = $("#channelSelect").find("option:selected").text();
        console.log(device_name);
        console.log(channel_number);
        $.ajax({
            type: "POST",
            contentType:"application/json",
            dataType:"json",
            url: "${baseURL}/water/history/select",
            async:true,
            data:JSON.stringify({"device_name":device_name,"channel_number":channel_number}),
            success:function(data){
                if(data.code === 0){
                    var chartDatas = data.data;
                    chartData = [];
                    chartDate = [];
                    for(var i in chartDatas){
                        chartDate.push(showTime(chartDatas[i].unix_time));
                        chartData.push(chartDatas[i].ch_x);
                    }
                    option = {
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        title: {
                            left: 'center',
                            text: '水压历史据量面积图',
                        },
                        legend: {
                            top: 'bottom',
                            data:['通道数据']
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: chartDate
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 10
                        }, {
                            start: 0,
                            end: 10,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        series: [
                            {
                                name:'通道数据',
                                type:'line',
                                smooth:true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(255, 70, 131)'
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgb(255, 158, 68)'
                                        }, {
                                            offset: 1,
                                            color: 'rgb(255, 70, 131)'
                                        }])
                                    }
                                },
                                data: chartData
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            },
            error:function(xhr, err, exception){
                console.log(xhr.responseText)
            }
        });
    });


    $(function(){

        $(window).on('resize',function(){
            myChart.resize();
        });



//        myChart.setOption(option);


        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/device/getAll3",
            async:false,
            success:function(data){
                if(data.code === 0){
                    $("#deviceSelect").select2({
                        placeholder: "请选择水压主机",
                        dropdownParent: $('#channelSelectForm'),
                        language: {
                            "noResults": function () {
                                return "没有数据";
                            }
                        },
                        allowClear:true,
                        data:data.data
                    });
                    var device_name = $("#deviceSelect").find("option:selected").text();
                    $.ajax({
                        type: "GET",
                        contentType: "application/json",
                        dataType: "json",
                        url: "${baseURL}/water/channel/getChannelByName?name=" + device_name,
                        async:false,
                        success: function (data) {
                            if(data.code === 0){
                                $("#channelSelect").select2({
                                    dropdownParent: $('#channelSelectForm'),
                                    language: {
                                        "noResults": function () {
                                            return "没有数据";
                                        }
                                    },
                                    allowClear:true,
                                    placeholder: "请选择水压主机",
                                    data:data.data
                                });
                            }
                        }
                    });
                }
            }
        });

        historyTable = $('#historyTable').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索IP:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            ajax: "${baseURL}/water/history/getData",
            columns:[
                {"data":"id"},
                {"data":"unix_time","render":function(data, type, row, meta){
                    return showTime(data);
                }},
                {"data":"ip"},
                {"data":"ch_0"},
                {"data":"ch_1"},
                {"data":"ch_2"},
                {"data":"ch_3"}
            ],
            destroy: true,
            serverSide: true,
            aoColumnDefs: [ { "bSortable": false, "aTargets": [ 3,4,5,6 ] }]
        });
    });

    function showTime(unix_time) {
        var date = new Date(unix_time * 1000);
        var year = date.getFullYear().toString();
        var month = (date.getMonth() + 1).toString();
        if(month.length < 2) month = '0' + month;
        var day = date.getDate().toString();
        if(day.length < 2) day = '0' + day;
        var h = date.getHours().toString();
        if(h.length < 2) h = '0'+ h;
        var m = date.getMinutes().toString();
        if(m.length < 2) m = '0'+ m;
        var s = date.getSeconds().toString();
        if(s.length < 2) s = '0'+ s;
        return year + '-' + month + '-' + day + ' ' + h + ":" + m +":" + s;
    }





</script>
</body>
</html>